<template>
  <div class="data-card">
    <div class="pie-dom" ref="pie-dom"></div>
  </div>
</template>

<script>
//滞后情况统计
import echarts from "echarts";
export default {
  data() {
    return {
      pieInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChar();
    });
  },
  methods: {
    drawPieChar() {
      let chart_dom = this.$refs["pie-dom"];
      this.pieInstance = echarts.init(chart_dom);
      let seriesData = [
        { name: "未滞后", value: 12 },
        { name: "滞后1-15天", value: 4 },
        { name: "滞后15-30天", value: 3 },
        { name: "滞后超30天", value: 1 },
      ];
      let baseOpt = {
        color: ["#67D5B5", "#66A5FE", "#A07DF1", "#EE7785"],
        tooltip: {
          show: false,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          top: 80,
          left: 300,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          textStyle: {
            rich: {
              a: {
                color: "#666666",
                fontSize: 14,
                width: 120,
              },
              b: {
                color: "#333333",
                fontSize: 18,
              },
            },
          },
          formatter: (name) => {
            if (seriesData.length) {
              var target;
              for (var i = 0, l = seriesData.length; i < l; i++) {
                if (seriesData[i].name == name) {
                  target = seriesData[i].value;
                }
              }
              return `{a|${name}}{b|${target}}`;
            }
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["30%", "50%"],
            data: seriesData,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.pieInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.pieInstance.resize();
      });
    },
  },
  destroyed() {
    this.pieInstance && this.pieInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  position: relative;
  .pie-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
